<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../style/order.css"/>
    <link rel="stylesheet" href="../plugin/element-ui/index.css">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div id="order_app">
      <div class="head_title">
          <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item><a href="../page/firstIndex.html">首页</a></el-breadcrumb-item>
              <el-breadcrumb-item>订单管理</el-breadcrumb-item>
          </el-breadcrumb>
      </div>
      <div style="margin-bottom: 20px;">
          <el-input
                  style="width: 15%;"
                  class="Search_input"
                  placeholder="请输入下单人"
                  v-model="input"
                  clearable>
          </el-input>
          <el-button  type="primary" icon="el-icon-search" @click="searchBtn" class="searchBtn">搜索</el-button>
      </div>
        <div>
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :row-class-name="tableRowClassName"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            label="序号"
                            align="center"
                            type="index"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            align="center"
                            label="名称"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="username"
                            align="center"
                            label="下单人"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            prop="phone"
                            align="center"
                            label="电话"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            align="center"
                            width="220"
                            label="地址">
                    </el-table-column>
                    <el-table-column
                            prop="orderTime"
                            align="center"
                            width="180"
                            sortable
                            label="下单时间">
                    </el-table-column>
                    <el-table-column
                            prop="checkoutTime"
                            align="center"
                            width="180"
                            sortable
                            label="支付时间">
                    </el-table-column>
                    <el-table-column
                            prop="amount"
                            align="center"
                            sortable
                            width="100"
                            label="总金额">
                    </el-table-column>
                    <el-table-column
                            prop="payMethod"
                            align="center"
                            sortable
                            width="100"
                            label="支付方式">
                        <template slot-scope="scope">
                            {{String(scope.row.status)=='1'?"微信支付":"支付宝支付"}}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作"  align="center" width="280">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="page"
                            :page-sizes="[2, 5, 10, 20]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total=totalSize>
                    </el-pagination>
                </div>
            </template>
        </div>

  </div>
<script src="../plugin/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../plugin/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../plugin/axios/axios.min.js"></script>
<script src="../js/order.js"></script>
<script>
    let app =new Vue({
        el:"#order_app",
        data() {
            return {
                tableData: [{
                    name:'',
                    username:'',
                    phone:'',
                    address:'',
                    orderTime:'',
                    checkoutTime:'',
                    payMethod:1,
                    amount:0,
                }],
                page:1,
                pageSize:8,
                input:'',
                totalSize:0
            }
        },
        created(){
          this.init()
        },
        props:{
            Visible:{
                type:Boolean,
                default:false
            }
        },
        methods: {
            async init(){
                let res = await getOrders(this.page,this.pageSize,this.input)
                if(res.data.code==1){
                    this.tableData=res.data.data.records
                    this.totalSize=res.data.data.total
                }

            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            searchBtn(){
              this.init()
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleDelete(index,row){

            },
            handleSizeChange(val){
                this.pageSize=val
                this.init()
            },
            handleCurrentChange(val){
                this.page=val
                this.init()
            }
        }
    })
</script>
</body>
</html>